<template>
    <view>
		<tabs :tabs="tabs" @tabsItemChange="hendleTabsItemChange">
			<view class="cart_main" v-if="index===0">
				<view v-if="newPayCart.length">
				<navigator class="cart_item"
				v-for="item in newPayCart"
				:key="item.goods_id"
				:url="`/pages/goods_detail/main?goods_id={{item.goods_id}}`"
				>

				<!-- 图片 -->
				<navigator class="cart_img_wrap">
					<image mode="widthFix" :src="item.goods_small_logo"></image>
				</navigator>
				<!-- 信息 -->
				<view class="cart_info_wrap">
					<view class="goods_name">{{item.goods_name}}</view>
					<view class="goods_price_wrap">
						<view class="goods_price">￥{{item.goods_price}}</view>
						<view class="cart_num_tool">
							
							<view class="goods_num">× {{item.num}}</view>
							
						</view>
					</view>
				</view>
				</navigator>
				</view>
				<view v-else class="kong">暂无相关订单~</view>
			</view>
			
			<view class="cart_main" v-if="index===1">
				<view v-if="noPayCart.length">
				<navigator class="cart_item"
				v-for="item in noPayCart"
				:key="item.goods_id"
				:url="`/pages/goods_detail/main?goods_id={{item.goods_id}}`"
				>

				<!-- 图片 -->
				<navigator class="cart_img_wrap">
					<image mode="widthFix" :src="item.goods_small_logo"></image>
				</navigator>
				<!-- 信息 -->
				<view class="cart_info_wrap">
					<view class="goods_name">{{item.goods_name}}</view>
					<view class="goods_price_wrap">
						<view class="goods_price">￥{{item.goods_price}}</view>
						<view class="cart_num_tool">
							
							<view class="goods_num">× {{item.num}}</view>
							
						</view>
					</view>
				</view>
				</navigator>
				</view>
				<view v-else class="kong">暂无相关订单~</view>
			</view>

			<view class="cart_main" v-if="index===2">
				<view v-if="newPayCart.length">
				<navigator class="cart_item"
				v-for="item in newPayCart"
				:key="item.goods_id"
				:url="`/pages/goods_detail/main?goods_id={{item.goods_id}}`"
				>

				<!-- 图片 -->
				<navigator class="cart_img_wrap">
					<image mode="widthFix" :src="item.goods_small_logo"></image>
				</navigator>
				<!-- 信息 -->
				<view class="cart_info_wrap">
					<view class="goods_name">{{item.goods_name}}</view>
					<view class="goods_price_wrap">
						<view class="goods_price">￥{{item.goods_price}}</view>
						<view class="cart_num_tool">
							
							<view class="goods_num">× {{item.num}}</view>
							
						</view>
					</view>
				</view>
				</navigator>
				</view>
				<view v-else class="kong">暂无相关订单~</view>
			</view>

			<like></like>
		</tabs>

	</view>
</template>

<script>
import Tabs from "@/components/Tabs"
import like from "@/components/like"
import Like from '../../components/like.vue'
	export default {
		components:{
			Tabs,
			like
		},
		data(){
			return{
				tabs:[
					{
						id:0,
						value:"全部",
						isActive:true
					},
					{
						id:1,
						value:"待付款",
						isActive:false
					},
					{
						id:2,  
						value:"待发货",
						isActive:false
					}
					
				],
				newPayCart:[],
				noPayCart:[],
				index:0
			}
    	},
		onShow(options){
			// const token = uni.getStorageSync('token');
			// if(!token){
			// 	uni.navigateTo({
			// 	url: '/pages/auth/index',
			// 	})
			// 	return;
			// }
			// uni.removeStorageSync('token');
			let pages = getCurrentPages(); 
			let currentPage=pages[pages.length-1];
			// console.log(currentPage.options);
			
			const type = currentPage.options.type;
			this.changeTitleBuyIndex(type-1);
			// this.getOrders(type);
			this.getNewOrders();
		},
        methods:{
			getNewOrders(){
				let newPayCart = uni.getStorageSync('newPayCart')||[];
				this.newPayCart = newPayCart;

				let noPayCart = uni.getStorageSync('noPayCart')||[];
				this.noPayCart = noPayCart;
			},

			getOrders(type){
				this.request({
					url:"https://api-hmugo-web.itheima.net/api/public/v1/my/orders/all",
					data:type
					})
				.then(res=>{
				//null 无效的token，无法请求拿到订单编号
				console.log(res);
				})
				
			},
			changeTitleBuyIndex(index){

				this.index = index;
				//修改源数据
				let tabs = this.tabs;
				tabs.forEach((v,i)=>i===index?v.isActive=true:v.isActive=false);
				//赋值到data
				this.tabs = tabs;
    		},
			//标题点击事件 从子组件传递过来
			hendleTabsItemChange(e){
				//获取索引
				const index = e.index;
				this.changeTitleBuyIndex(index);
				this.getOrders(index+1);
			},
		}
		
	}
</script>

<style lang="scss">
	.cart_main {
			
			.cart_item {
			display: flex;
			padding: 10rpx;
			border-bottom: 1rpx solid #ccc;
		
			
			.cart_img_wrap {
				flex: 2;
				display: flex;
				justify-content: center;
				align-items: center;
				image {
				width: 80%;
				}
			}
		
			
			.cart_info_wrap {
				flex: 4;
				display: flex;
				flex-direction: column;
				justify-content: space-around;
				.goods_name {
					display: -webkit-box;
					overflow: hidden;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2; 
					color: #666;
				}
		
				
			.goods_price_wrap {
				display: flex;
				justify-content: space-between;
				.goods_price {
					color: #e64340;
					font-size: 34rpx;
				}
		
				
				.cart_num_tool {
					display: flex;

		
					
				.goods_num {
						width: 55rpx;
						height: 55rpx;
						display: flex;
						justify-content: center;
						align-items: center;
					}
				}
				}
			}
			}

			.kong{
				margin-top: 100rpx;
				margin-left: 290rpx;
				color: #666;
			}
		}
</style>